<template>
  <div class="home" style="width: 100%;height:100%;">
    <Dingbu :nameTitle="PageName"></Dingbu>
    <div style="overflow:hidden;">
        <Button class="addBtn" style="float:right;margin-right:20px;font-size:16px;" @click="goBack">返回</Button>        
    </div>
    <div class="info">
       <ul class="l_info">
           <li>
               <b class="title te">用户ID</b>
               <i class="des te no_l_border">65346456</i>
           </li>
           <li>
               <b class="title te">用户昵称</b>
               <i class="des te no_l_border">65346456</i>
           </li>
           <li>
               <b class="title te">下单次数</b>
               <i style="border-bottom:0;" class="des no_l_border">65346456</i>
           </li>
           <li>
               <b style="border-bottom:1px solid #ddd;" class="title te">首次登录联盟商家时间</b>
               <i class="des no_l_border">65346456</i>
           </li>
       </ul>
       <ul style="" class="l_info r_info">
           <li style="position:relative;height:73px;left:0px;">
               <b style="position:absolute;top:0;padding: 24px 16px 24px 0;" class="title te no_l_border">用户头像</b>
               <i style="padding:10px 0 10px 8px;margin-left:32.5%;" class="des te no_l_border">
                   <img style="height:50px;float:left;" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1781615267,834481015&fm=27&gp=0.jpg" alt="">
               </i>
           </li>
           <li>
               <b class="title te no_l_border">用户手机号</b>
               <i class="des te no_l_border">65346456</i>
           </li>
           <li>
               <b class="title te no_l_border">消费总金额(￥)</b>
               <i class="des te no_l_border">65346456</i>
           </li>
           <li>
               <b class="title no_l_border">上次登录联盟商家时间</b>
               <i class="des no_l_border">65346456</i>
           </li>
       </ul>
    </div>
    <div class="table">
        <Table size="large" :columns="columns1" :data="data1" style="top:25px;"></Table>
        <Page style="float:right;margin:33px 15px 0 0;" :total="10" show-elevator></Page>
    </div>
  </div>
</template>
<script>
import Dingbu from "../header/dingbu.vue";
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      PageName: "用户详情",
      columns1: [
        {
          title: "序号",
          key: "name"
        },
        {
          title: "商铺名称",
          key: "age"
        },
        {
          title: "订单金额(￥)",
          key: "address"
        },
        {
          title: "下单次数",
          key: "age"
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  style: {},
                  on: {
                    click: () => {
                      this.lookDetail(params.index, params);
                    }
                  }
                },
                "查看消费明细"
              )
            ]);
          }
        }
      ],
      data1: [{ name: "111" }]
    };
  },
  mounted() {},
  components: {
    Dingbu
  },
  methods: {
    lookDetail(i, params) {
      this.$router.push({ name: "userPayDetail" });
    },
    goBack() {
        window.history.back();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../css/common.scss";
.info {
  padding: 8px 15px 0 15px;
  display: flex;
  justify-content: center;
  min-width: 811px;
  .r_info {
    position: relative;
    left: 0px;
    .te {
      border-bottom: 0;
    }
  }
  .l_info {
    width: 50%;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    .title {
      display: inline-block;
      width: 32%;
      text-align: right;
      padding: 24px 16px 24px 0;
      font-size: 16px;
      color: #666;
      border: 1px solid #ddd;
      background: #f9fafc;
      margin: 0;
    }
    .des {
      display: inline-block;
      width: 66.4%;
      text-align: left;
      padding: 24px 0 24px 8px;
      font-size: 16px;
      color: #666;
      position: relative;
      left: 0px;
      border: 1px solid #ddd;
      margin: 0;
      font-style: normal;
    }
    .te {
      border-bottom: 0;
    }
    .no_l_border {
      border-left: 0;
    }
  }
}
</style>